<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>manage</title>
		<link rel="stylesheet" href="bookmanage.css">
	</head>
	<body>
		<table>
		        <thead>
		            <tr>
		                <th>作者</th>
		                <th>书名</th>
		                <th>操作</th>
		            </tr>
		        </thead>
		        <tbody>
		            <tr>
		                <td>张嘉佳</td>
		                <td>从你的全世界路过</td>
		                <td>
		                    <button class="del">删除</button>
		                    <button class="ref">修改</button>
		                </td>
		            </tr>
		            <tr>
		                <td>余华</td>
		                <td>活着</td>
		                <td>
		                    <button class="del">删除</button>
		                    <button class="ref">修改</button>
		                </td>
		            </tr>
		            <tr>
		                <td>云边有个小卖部</td>
		                <td>张嘉佳</td>
		                <td>
		                    <button class="del">删除</button>
		                    <button class="ref">修改</button>
		                </td>
		            </tr>
		        </tbody>
		    </table>
		    <div id="content">
		        <input type="text">
		        <input type="text">
		        <button class="confirm">确认修改</button>
		        <button class="cancel">取消</button>
		    </div>
	</body>
    <script>
	var TB = document.getElementsByTagName('tbody')[0];
	    var myContent = document.getElementById('content');
	    
	    // 给tbody绑定点击事件（事件委托）
	    TB.onclick = function (e) {
	        // 如果当前点击的是删除按钮
	        if (e.target.className == 'del') {
	            // 弹出一个询问框，并用x接收返回值 ----  
	            // 询问框返回值只有两个  点击确认：true  点击取消：false
	            var x = confirm('确认删除吗？');
	            // 如果x值为真，即点击了确认，删除所在行
	            if (x) { 
	                // e.target 为当前点击对象--->删除按钮
	                // e.target.parentElement ---> td 
	                // e.target.parentElement.parentElement  ---> tr
	                TB.removeChild(e.target.parentElement.parentElement);
	            }else{
	                TB.removeChild();
	            }
	        }
	        // 如果当前点击的是修改按钮
	        if(e.target.className == 'ref'){
	            // 下面的div要显示出来
	            myContent.style.display = "block";
	            // 给每一个输入框赋初始值
	            /* 
	                这是让 myContent.children[0] 第一个输入框的value（输入框中显示的字为姓名）
	                e.target.parentElement.parentElement  ---> tr
	                e.target.parentElement.parentElement.children[0]  --->  tr的第一个子节点，即姓名所在的td
	             */
	            myContent.children[0].value = e.target.parentElement.parentElement.children[0].innerText;
	            // 这与第一个原理如出一辙
	            myContent.children[1].value = e.target.parentElement.parentElement.children[1].innerText;
	
	            // 给div绑定点击事件（事件委托），这里形参用ev是为了区别上面的e
	            myContent.onclick = function(ev){
	                // 如果点击的是确认修改
	                if (ev.target.className == 'confirm') {
	                    // 下面的div要隐藏起来
	                    myContent.style.display = "none";
	                    // 点击了确认修改就把文本框的value值赋值给对应td的文本
	                    e.target.parentElement.parentElement.children[0].innerText =  myContent.children[0].value;
	                    e.target.parentElement.parentElement.children[1].innerText =  myContent.children[1].value;
	                }
	                // 如果点击的是取消，下面的div同样要隐藏，之所以这样写，是因为只有点击这两个按钮才会执行隐藏操作
	                if (ev.target.className == 'cancel') {
	                    myContent.style.display = "none";
	                }
	            }
	        }
	    }
			
		</script>
</html>
